@CHARSET "ISO-8859-1";

body {
	height: 100%;
	background-color: lightgrey;
}

/* player colors */
#playerColors div {
	width: 40px;
	height: 20px;
}

div.player1 {
	background-color: cyan;
}

div.player2 {
	background-color: magenta;
}

img.player1 {
	border: 1px solid cyan;
}

img.player2 {
	border: 1px solid magenta;
}

/* game board */
#board {
	display: table;
	border: 1px solid black;
	border-collapse: true;
	margin: 20px auto;
}

.row {
	display: table-row;
}

.cell {
	display: table-cell;
	height: 100px;
	width: 100px;
	cursor: pointer;
	position: relative; text-align : center;
	vertical-align: middle;
	text-align: center;
}

.contentImage {
	width: 90px;
	height: 90px;
	display: inline-block;
}

.power-level {
	z-index: 1;
	position: absolute;
	left: 50%;
	bottom: 5px;
	color: red;
	font-weight: bold; 
}

/* cell backgrounds */

.grass {
	background-image: url("../images/backgrounds/grass.png");
}

.water {
	background-image: url("../images/backgrounds/water.png");
}

.trap {
	background-image: url("../images/backgrounds/trap.png");
}

.den {
	background-image: url("../images/backgrounds/den.png");
}

/* highlighted cells */

.cell.highlighted img {
	border: 1px solid orange;
}

.cell-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	left: 0px;
	top: 0px;
	background-color: grey;
}

.move-shadow {
	background-color: grey;
}

.animal-selected {
	background-color: silver;
}

.attack-shadow {
	background-color: red;
}

